<template>
    <view
        class="container"
        :style="{
            padding: `0 ${paddingX}px`,
            paddingTop: `${paddingX}px`
        }"
    >
        <cf-swiper-mask
            :list="list"
            :height="bannerHeight"
            :interval="timeInterval"
            :border-radius="borderRadius"
            :mode="mode"
            :autoplay="autoplay"
            :active-color="activeColor"
            :indicator-pos="indicatorPos"
            :maskWidth="maskWidth"
            :maskHeight="maskHeight"
            @click="showDetail"
            @maskClick="maskClick"
        />
    </view>
</template>

<script lang="ts" setup>
/**
 * 本组件 默认自带padding top bottom 20rpx 因此 不给margin
 * data 需求参数 见 computed
 */
import cfSwiperMask from './components/swiper-mask.vue'
import global from '@/config/index'
import { computed, inject } from 'vue'

const ins = inject<any>('data')

const autoplay = computed(() => {
    return ins.autoPlay
})

const timeInterval = computed(() => {
    return ins.interval * 1000 || 2500
})
const borderRadius = computed(() => {
    return ins.style.imageStyle === 0 ? 20 : 0
})
const paddingY = computed(() => {
    return ins.style.paddingY || 0
})
const paddingX = computed(() => {
    return ins.style.marginLeftRight || 0
})
const mode = computed(() => {
    return ['round', 'rect', 'number'][ins.style.indicatorStyle || 0]
})
const activeColor = computed(() => {
    return ins.style.indicatorColor || 'rgba(255,255,255,0.8)'
})
const indicatorPos = computed(() => {
    return ['bottomLeft', 'bottomCenter', 'bottomRight'][ins.style.indicatorPosition || 0]
})
const list = computed(() => {
    return ins.images.map((m: any) => {
        let item: any = {}
        if (m.image) item.image = `${global.productImageUrl}${m.image}/0`
        if (m.maskImage) item.maskUrl = `${global.productImageUrl}${m.maskImage}/0`
        item.maskPostion = m.maskPosition
        return item
    })
})
const target = computed(() :Array<string>=> {
    return ins.images.map((m: any) => m.url)
})
const bannerHeight = computed(() => {
    let px = uni.getSystemInfoSync().screenWidth * (ins.style.rate || 1)
    return uni.$u.$tools.px2rpx(px)
})
const maskTargets = computed(() => {
    return ins.images.map((m: any) => m.maskUrl)
})
const maskWidth = computed(() => {
    return ins.style.maskWidth + 'px'
})
const maskHeight = computed(() => {
    return ins.style.maskHeight + 'px'
})

function showDetail(index: number) {
    console.log(target.value);
    // let { urlId, urlType, urlString } = target.value[index];
    // uni.$u.$util.jumpByUrlType(urlId, urlType, urlString, '')
}

function maskClick(index: number) {
    console.log("maskTargets.value: " + maskTargets.value);
    // let { urlId, urlType, urlString } = maskTargets.value[index]
    // uni.$u.$util.jumpByUrlType(urlId, urlType, urlString, '')
}
</script>
<style lang="scss" scoped>
.container {
    margin-bottom: 20rpx;
}
</style>
